<template>
    <div class="common">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>培训活动列表</span>
                <selectDate @changTime="changTime"></selectDate>
                <a-input-search class="inputStyle" placeholder="搜索标题" enter-button @search="onSearch" v-model="searchValue" style="margin-left:10px" />
            </template>
            <div slot="right">
                <a-button type="primary" @click="addActive()">新增活动</a-button>
            </div>
            <div slot="table">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:red">未开始</span>
                        <span v-else-if="record.status==1" style="color:green">进行中</span>
                        <span v-else style="color:#999">已结束</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="edit(record)">修改</span>
                        <confirmBox
                            @handleOk="deleteTraining(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'活动'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="stayAtTop(record)"
                            :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                        ></confirmBox>
                        <span @click="apply(record)">审核报名</span>
                        <span @click="toRecord(record)">成绩管理</span>
                    </div>
                </a-table>
            </div>
        </innerCommon>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '活动名称',
        dataIndex: 'title',
    },{
        title: '开始时间',
        dataIndex: 'startTime',
    },{
        title: '结束时间',
        dataIndex: 'endTime',
    },{
        title: '申请人数',
        dataIndex: 'applyNum',
    },{
        title: '报名成功人数',
        dataIndex: 'joinedNum',
    },{
        title: '状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:300
    }
]
import {getTrainingManagerListApi,deleteTrainingManagerApi,TrainingManagerStayAtTopApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import selectDate from "@/components/common/selectDate"
import confirmBox from "@/components/common/confirmBox"
export default {
    name:"trainingManagerAdd",
    components:{innerCommon,selectDate,confirmBox},
    created(){
        if(this.$route.query.page){
            this.searchInfo.page=this.$route.query.page
            this.pagination.current=this.$route.query.page
        }
        this.init()
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"培训管理",
            path:'/trainingManager'
        }]
    },
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    data(){
        return{
            columns,
            location:[],
            list:[],
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:'',
                endTime:'',
                startTime:''
            },
            pagination:{total:0,pageSize:10,current:1},
            searchValue:''
        }
    },
    methods:{
        init(){
            this.getToken(getTrainingManagerListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1,...item.news,'id':item.id}))
                this.pagination.total=res.data.count
            })
        },
        edit(data){
            this.$router.push({path:'/trainingManagerAdd',query:{data:JSON.stringify(data)}})
        },
        changTime(start,end){
            this.searchInfo.startTime=start
            this.searchInfo.endTime=end
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        },
        deleteTraining(id){
            this.getToken(deleteTrainingManagerApi,{'classId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(data){
            this.getToken(TrainingManagerStayAtTopApi,{'classId':data.id,'stayAtTop':data.stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        },
        addActive(){
            this.$router.push({path:'/trainingManagerAdd'})
        },
        apply(data){
            this.$router.push({path:'/trainingApply',query:{id:data.id,'title':data.title}})
        },
        toRecord(data){
            this.$router.push({path:'/trainingRecord',query:{id:data.id,'name':data.title,page:this.searchInfo.page}})
        }

    }
}
</script>
<style lang="stylus" scoped>

</style>